<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <el-input style="margin-bottom:10px" type="text" prefix-icon="el-icon-search" size="small" placeholder="输入员工姓名全员搜索" v-model="whichemployee.keyword" @input="search"/>
        <!-- 树形组件 -->
        <el-tree :data="data" :props="defaultProps" :expand-on-click-node="false" :highlight-current="true" :default-expand-all="true" @node-click="nodeChange" node-key="id" ref="tree" ></el-tree>
      </div>
      <div class="right">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="$router.push('/employee/detail')" v-permission="'add-employee'">添加员工</el-button>
          <el-button size="mini" @click="importExcel">excel导入</el-button>
          <el-button size="mini" @click="exportEmployee">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table style="width: 100%" tooltip-effect="dark" :data="tableData" v-loading="loading">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column label="头像" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.staffPhoto" alt="" class="ava" v-if="scope.row.staffPhoto">
              <div v-else class="avater">{{ scope.row.username?.charAt(0) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" width="100"></el-table-column>
          <el-table-column label="手机号" sortable prop="mobile" width="120"></el-table-column>
          <el-table-column label="工号" sortable prop="workNumber" width="120"></el-table-column>
          <el-table-column label="聘用形式" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.formOfEmployment==1?'正式':'非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" width="100"></el-table-column>
          <el-table-column label="入职时间" sortable prop="timeOfEntry" width="120"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleCheck(scope.row)">查看</el-button>
              <el-button
                size="mini"
                @click="addRole(scope.row.id)">角色</el-button>
                <el-popconfirm
                  title="确认删除该行数据吗？"
                  @onConfirm="handleDelete(scope.row.id)"
                >
                  <el-button
                    style="margin-left: 10px;"
                    size="mini" 
                    type="danger"
                    slot="reference">删除</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="position: relative;margin-top: 20px;">
          <el-pagination
            style="position: absolute;right: 0px;"
            @current-change="handleCurrentChange"
            :current-page.sync="whichemployee.page"
            :page-size="whichemployee.pagesize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <importExcel :dialog="excel" @refresh="initEmployee"></importExcel>
    <Role :dialogVisible.sync="dialog" :checkId.sync="checkList" :roleId="id"></Role>
  </div>
</template>

<script>
import {getDepartmentList} from '@/api/department'
import {transListToTreeData} from '@/utils/index'
import {getEmployees,exportEmployees,deleteEmployees,getEmployeePerson}  from '@/api/employee'
import importExcel from '@/views/employee/components/import-excel.vue'
import FileSaver from 'file-saver'
import {getDetailRole} from '@/api/role'
import Role from '@/views/employee/components/role.vue'
export default {
  name: 'Employee',
  components:{
    importExcel,
    Role
  },
  data() {
    return {
      data: [],
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      whichemployee:{
        page:1,
        pagesize:10,
        keyword:'',
        departmentId:null
      },
      tableData:[],
      total:0,
      loading:false,
      timer:null,
      excel:{
        title:'员工导入',
        dialogVisible:false
      },
      dialog:false,
      // 角色
      checkList:[],
      id:''
    }
  },
  async created() {
    const result=await getDepartmentList()
    this.data=transListToTreeData(result,0)
    // 起始节点
    this.whichemployee.departmentId=this.data[0].id
    // 设置起始高亮
    this.$nextTick(()=>{
      this.$refs.tree.setCurrentKey(this.whichemployee.departmentId)
    })
    // 起始员工列表
    await this.initEmployee()
  },
  methods:{
    // 获取员工列表
    async initEmployee() {
      this.loading=true
      const data=await getEmployees(this.whichemployee)
      this.total=data.total
      this.tableData=data.rows
      this.loading=false
    },
    // 切换部门
    async nodeChange(node) {
      this.whichemployee.departmentId=node.id
      this.whichemployee.page=1
      await this.initEmployee()
    },
    // 切换页码
    async handleCurrentChange(val) {
      this.whichemployee.page=val
      await this.initEmployee()
    },
    // 输入框查询
    async search() {
      window.clearTimeout(this.timer)
      this.timer=window.setTimeout(async ()=>{
      this.whichemployee.page=1
      await this.initEmployee()
    },1000)
    },
    // 导出excel表
    async exportEmployee() {
      const file=await exportEmployees()
      // 保存文件
      // FileSaver.saveAs(blob对象,文件名称)
      FileSaver.saveAs(file,'员工信息表.xlsx')
    },
    // 导入excel
    importExcel() {
      this.excel.dialogVisible=true
    },
    // 删除
    async handleDelete(id) {
      await deleteEmployees(id)
      this.$message({
        message: '删除员工成功',
        type: 'success'
      });
      this.whichemployee.page=Math.ceil(this.total/this.whichemployee.pagesize)
      await this.initEmployee()
    },
    // 查看员工信息
    handleCheck(val) {
      this.$router.push(`/employee/detail/${val.id}`)
    },
    // 分配角色
    async addRole(id) {
      // 获取对应员工的角色
      const data=await getEmployeePerson(id)
      this.dialog=true
      this.id=id
      this.checkList=data.roleIds
    }
  }
}
</script>

<style lang="scss" scoped>
.avater {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #04c9be;
  color: #fff;
  text-align: center;
  line-height: 30px;
}
.ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.app-container {
  background: #fff;
  display: flex;
  .left {
    width: 280px;
    padding: 20px;
    border-right: 1px solid #eaeef4;
  }
  .right {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>